<template>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <el-card shadow="hover" id="main1" style="width: 600px; height: 300px;float: left;"></el-card>
    <el-card shadow="hover" id="main2" style="width: 600px; height: 300px;float: left;"></el-card>
    <el-card shadow="hover" id="main3" style="width: 600px; height: 330px;float: left;"></el-card>
    <el-card shadow="hover" id="main4" style="width: 600px; height: 330px;float: left;"></el-card>
  </template>
   
  <script lang="ts">
   
  //按需引入
  import { defineComponent, onMounted } from "vue";
   
  //引入创建的echarts.ts文件
  import echarts from "../echart/echart";
   
  export default defineComponent({
    setup() {
      /**
       * 在使用init方法初始化图表之前，确保DOM元素已经被正确加载。在Vue组件中，
       * 可以使用onMounted钩子函数来确保在DOM准备就绪后再执行初始化操作。
       */
      //如果不使用这个钩子可能会报错
      onMounted(() => {
        /**
          !是非空断言运算符，表示确保找到了匹配的元素，如果找不到元素或其值为
      null 或 undefined，会引发错误。
          document.getElementById("main") 是调用 getElementById 方法，
      传入参数 “main”，用于获取具有 id 为 “main” 的元素。
          echarts.init() 方法用于初始化一个 echarts 图表实例。
      */
   
        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.getElementById("main1")!;
        var myChart = echarts.init(chartDom);
   
        var chartDom1 = document.getElementById("main2")!;
        var myChart1 = echarts.init(chartDom1);

        var chartDom2 = document.getElementById("main3")!;
        var myChart2 = echarts.init(chartDom2);

        var chartDom3 = document.getElementById("main4")!;
        var myChart3 = echarts.init(chartDom3);
      
        //还可以这样一起写
        // var myChart = echarts.init(document.getElementById("main")!);
   
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: "菜品销量(最受欢迎6个菜)",
          },
          tooltip: {},
         
          xAxis: {
            data: ["红烧肉", "鱼香肉丝", "宫保鸡丁", "回锅肉", "水煮肉片", "大盘鸡"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
             // data: [5, 20, 36, 10, 10, 20],
              data:[
                {
                   value:54,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
                {
                   value:42,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
                {
                   value:65,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
                {
                   value:54,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
                {
                   value:59,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
                {
                   value:76,
                   itemStyle:{
                        color:'#409eff'
                    }
                },
              ]
            },
          ],
        };
        // 指定图表的配置项和数据
      var  option2 = {
        title: {
            text: "三餐营收占比",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
            series: [
                {
                type: 'pie',
                data: [
                    {
                    value: 122312,
                    name: '午饭营收',
                    },
                    {
                    value: 50123,
                    name: '早餐营收'
                    },
                    {
                    value: 81231,
                    name: '晚餐营收'
                    }
                ]
                }
            ]
            };

      //折线图
      var  option3 = {
        title: {
            text: "近七天营业额",
          },
          tooltip: {},
            xAxis: {
                type: 'category',
                data: ['11.01', '11.02', '11.03','11.04','11.05','11.06','11.07']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: [7211,6421,8213,10012,6001,5991,9123],
                type: 'line'
                }
            ]
            };

      //横向柱状图
      var option4 = {
        title: {
            text: "月营业额",
          },
          tooltip: {},
        dataset: {
            source: [
            ['money', 'month'],
            [231203, '一月'],
            [213213, '二月'],
            [151312, '三月'],
            [194123, '四月'],
            [283131, '五月'],
            [183123, '六月'],
            [251231, '七月'],
            [173123, '八月'],
            [273123, '九月'],
            [293123, '十月'],
            [183211, '十一月'],
            [201231, '十二月']
            ]
        },
        xAxis: {},
        yAxis: { type: 'category' },
        series: [
            {
            type: 'bar',
            encode: {
                // 将 "money" 列映射到 X 轴。
                x: 'money',
                // 将 "month" 列映射到 Y 轴。
                y: 'month'
            }
            }
        ]
        };



        // 使用刚指定的配置项option和数据显示图表myChart。
        myChart.setOption(option);
        // 使用刚指定的配置项option和数据显示图表myChart。
        myChart1.setOption(option2);
        //折线图
        myChart2.setOption(option3);
        //横向1-12月营业额
        myChart3.setOption(option4)
      });
   
      return {};
    },
  });
  </script>
   
  <style scoped></style>